<template>
  <div class="home" id="graph-panel"></div>
</template>

<script>
import { VisGraph } from "@/assets/js/visgraph.min.js";
import { LayoutFactory } from "@/assets/js/VisgraphLayout.min.js";
import config from "@/assets/js/canvasConfig.js";
export default {
  name: "HomeView",
  data() {
    return {
      visGraph: null,
      graphData: {
        nodes: [
          { id: "1", label: "刘备", type: "男", properties: { age: 50 } },
          { id: "2", label: "关羽", type: "男" },
          { id: "3", label: "张飞", type: "男" },
        ],
        links: [
          {
            source: "1",
            target: "2",
            label: "二弟",
            properties: { other: "other prop" },
          },
          { source: "1", target: "3", label: "三弟" },
        ],
      },
    };
  },
  mounted() {
    this.visGraph = new VisGraph(document.getElementById("graph-panel")); //初始化绘图客户端
    this.visGraph.drawData(this.graphData); //绘制图完成
  },
};
</script>
<style lang="less">
.home {
  width: 100vw;
  height: 100vh;
}
</style>
